<template>
       <!-- TODO:这里尽量不要覆盖默认值，比如:value -->
       <component :is="components[type]" :children="children" :prop="prop" v-bind="props" v-on="$listeners" :txtValue="txtValue"  :value="props.value||value">
        <slot name="inner"></slot>
      </component>
</template>

<script>
// import { getParent, getExtendAttrs, normalOptions, normalDictOptions } from './utils'
import { mapState, mapGetters } from 'vuex'
import countdown from './src/countdown';
  import icon from './src/icon';
  import image from './src/image';
  import label from './src/label';
  import sort from './src/sort';
  import tag from './src/tag';
  import timeText from './src/time-text';
  import buttons from './src/buttons';
  import button from './src/button';
  import dropdown from './src/dropdown';
  import tags from './src/tags';
  import select from './src/select';
  import Switch from './src/switch';
  import tagstatus from './src/tagstatus';

  const components = {
      countdown,
      icon,
      image,
      label,
      sort,
      tag,
      timeText,
      button,
      buttons,
      dropdown,
      tags,
      select,
      tagstatus,
      switch:Switch,
};
/**
 * 插槽
 * @member slots
 * @property {string} - 定义组件附加内容，内容在输入框的下方
 * @property {string} inner 定义输入框内部内容
 */

export default {
  name: 'XdhTableItem',
  inject: {
    xdhForm: {
      default: null
    }
  },

  props: {
    type: {
      type: String,
      default: 'label',
      // validator(val) {
      //   return !!components[val]
      // }
    },
    prop: {
      type: [String, Number],
      // required: true
    },
    indexs: {
      type: Number
    },
        // 组件子组件
    children: {
      type: [Object,Array],
      default() {
        return {}
      }
    },
    // 选项数组
    options: {
      type: Array,
      default() {
        return []
      }
    },
    // 输入框组件实例化参数
    props: {
      type: [Object,Array],
      default() {
        return {}
      }
    },
    // 内容区宽度，不指定即自适应
    contentWidth: {
      type: [Number, String]
    },
    txtValue:{
      type: [Object,Array],
      default() {
        return {}
      }
    },
    value: {},
    isItem: {
      type: Boolean,
      default: true
    },
  },
  data() {
    return {
      // 表格列定义数组
      tableColumns: this.columns,

      // 表格行数据
      // 表格行数据
      tableData: this.data,

      // 列拖拽Sortable实例
      columnSortableInstance: null,

      // 行拖拽Sortable实例
      rowSortableInstance: null,

      // 上次滚动的位置
      lastScrollTop: 0,

      // 筛选框的实例
      filterVM: {}
    }
  },
  computed: {
      ...mapState({
      form: state => state.formModel,
      fields: state => state.fields,
      sortable_item: state => state.fields,
      tableField: state => state.tableField,
      // sortable_items: state => state.tableField,
      editField: state => state.editField

    }),
    ...mapGetters(['model','tableModel']),
    fieldValue: {
      get() {
        // console.log(this.tableColumns,'_+++++++++++++')
        const model = this.parent.currentModel
        if (model) {
          return getPropByPath(model, this.prop.toString(), true).v

        }
        return null
      },
      set(val) {
        const model = this.parent.currentModel
        const prop = getPropByPath(model, this.prop.toString())
        this.$set(prop.o, prop.k, val)
      }
    },
    // el-table 参数
    tableOptions() {
      let options = { ...this.$props }
      delete options.columns
      delete options.data
      delete options.columnSortable
      delete options.rowSortable
      delete options.distanceToButton
      return options
    }

  },
  watch: {
    data(val) {
      console.log(val, '================================================================')
    //   this.tableData = val
    },
    columns(val) {
      this.tableColumns = val
      const data = this.tableData
      this.tableData = []
      this.$nextTick(() => {
        this.tableData = data
      })
    }
  },
  created() {
    this.components = components
  },
  methods:{
    handleEditItem(item, index){
        item.index = index;
        let info = Object.assign({}, item);
        // this.$store.dispatch('user/setNodeinfo', info);
        this.$store.commit('setEditTableField', info)
    },
    removeItem(item) {
        const isDepend = !!this.tableField.find(n => n.depend === item.prop)
        if (isDepend) {
            this.$message.warning('该字段被其他字段依赖，不能删除')
            return
        }
        this.$store.commit('setEditTableField', null)
        this.$store.commit('removeTableField', item)
    },
  }
}
</script>
